<template>
  <div class="tenant-container">
    <!-- 用户名称搜索  状态搜索 -->
    <ContentWrap>
      <el-form ref="queryFormRef" class="-mb-15px" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="用户名称" prop="tenantName">
          <el-input v-model="queryParams.tenantName" placeholder="请输入用户名称" class="!w-240px" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" clearable placeholder="请选择状态" class="!w-240px">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleView('add')">新增租户</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <!-- 记录列表 -->
    <ContentWrap>
      <el-table :data="tableData" :stripe="true" :show-overflow-tooltip="true" :loading="loading">
        <el-table-column label="租户编号" prop="tongueTenantId" align="center" />
        <el-table-column label="租户名" prop="tenantName" align="center" />
        <el-table-column label="舌诊额度" prop="tongueQuota" align="center" />
        <el-table-column label="已分配额度" prop="usedTimes" align="center" />
        <el-table-column label="状态" prop="status" align="center">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.TONGUE_TENANT_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="过期时间" prop="expiredTime" align="center">
          <template #default="scope">
            <span>{{ scope.row.expiredTime ? formatDate(scope.row.expiredTime, 'YYYY-MM-DD HH:mm:ss') : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template #default="scope">
            <el-button type="primary" link @click="handleView('edit', scope.row)">编辑</el-button>
            <el-button :type="scope.row.status?'danger':'primary'" link @click="handleDelete(scope.row)">{{ scope.row.status ? '禁用' : '启用'
              }}</el-button>
            <el-button type="primary" link @click="handleRecord(scope.row)">查看记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
        @pagination="getList" />
    </ContentWrap>
    <AddTenant ref="addTenantRef" @success="getList" />
    <SeeRecord ref="seeRecordRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import { ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import AddTenant from './addTenant.vue'
import SeeRecord from './seeRecord.vue'
import { TongueTenantApi } from '@/api/application/tongue/leaseholder'
const addTenantRef = ref()
const seeRecordRef = ref()
const state = reactive({
  queryParams: {
    tenantName: '',
    status: '',
    pageNo: 1,
    pageSize: 10
  },
  loading: false,
  tableData: [],
  total: 0,
})
const { queryParams, loading, tableData, total } = toRefs(state)
const queryFormRef = ref() // 搜索的表单
const handleRecord = (row: any) => {
  seeRecordRef.value.open(row)
}
const handleDelete = (row: any) => {
  const str = row.status ? '禁用' : '启用'
  ElMessageBox.confirm(`是否${str}当前租户？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const postData = {
      id: row.id,
      status: row.status ? 0 : 1
    }
    try {
      const data = await TongueTenantApi.putTenantUpdateStatus(postData)
    } finally {
      getList()
      ElMessage({
      message: '操作成功!',
      type: 'success'
    })
    }
  })
  console.log(row)
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await TongueTenantApi.getTenantPage(queryParams.value)
    tableData.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const handleView = (type: string, row?: any) => {
  addTenantRef.value.open(type, row)
}
/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const handleReset = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss"></style>